TALLER DE HTML
¿ QUE ES HTML? Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes m á s utilizados en el Web Wide Web. Las p á ginas de Internet est á n escritas en este lenguaje. Le brinda al autor la oportunidad de integrar texto, fotos, sonidos y enlaces en un solo lugar.
UNA P Á GINA B Á SICA El lenguaje t r abaja a base de etiquetas. La informaci ó n que aparece dentro de estas estar á  influenciada por las mismas. <xxx> Inicio de una etiqueta. </xxx> Cierre de una etiqueta.
Continuaci ón: Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>. El documento est á  dividido en dos partes principales: El encabezamiento En este hay informaci ó n que no se ve en la pantalla principal. Este debe ser corto y descriptivo, ya que ser á  lo que ver á n las personas cuando a ñ adan la p á gina a sus favoritos.
Continuaci ón: La etiqueta del encabezamiento se trabajar á  de la siguiente manera: <HEAD>Texto</HEAD> La etiqueta del cuerpo ser á :  <BODY>Texto</BODY> La etiqueta del t í tulo ser á : <TITLE>Texto</TITLE>
Continuaci ón: La estructura b á sica de las partes de una p á gina Web son: <HTML> <HEAD><TITLE> t í tulo  </TITLE></HEAD> <BODY>E s la informaci ón que mostrará la página al usuario  </BODY> </HTML>
FORMATO DEL TEXTO Podemos poner color al fondo utilizando la siguiente instrucci ó n: <BODY BGCOLOR=“xxyyzz”> Indica que lleva tres pares de valores que corresponden a  R  ( rojo ),  G  ( verde ),  B  ( azul ) Estos pueden tomar valores desde 00 a FF, si se combinan se obtendrán distintos colores. Ej. “#FAB894”  anaranjado   “ FA” rojo, “B8”  verde y “94” azul. Para obtener  BLANCO  ser í a “#FFFFFF”, el Negro “#000000” Y  ROJO  “#FF0000”.
Continuaci ón: Colores xx  es un número indicativo de la cantidad de color rojo. YY  es un número indicativo de la cantidad de color verde. ZZ   es un número indicativo de la cantidad de color azul. Los números están representados en numeración  hexadecimal , esta numeración se com p one de 16 dígitos: 0 1 2 3 4 5 6 7 8 9 A  B C D E F Donde el número menor es 00 y el mayor es FF. Ejemplo:  el número rojo es el #FF0000, debido a que tiene el máximo de rojo y cero de los otros dos colores.
Continuaci ón: Los colores primarios son: #FF0000 rojo #00FF00 verde #0000FF azul Otros colores son: #FFFFFF blanco #000000 negro #FFFF00 amarillo
Continuaci ón: Otras instrucciones: Para definir p á rrafos:  <P> Texto </P> L ínea en blanco: <BR> Texto </BR> Centrar texto:  <CENTER> Texto   < /CENTER> Línea horizontal: <HR> Texto < /HR> Para el color del texto utiliza el comando: <FONT COLOR=“#xxyyzz”> Texto < /FONT> Debemos recordar que estas instrucciones hay que desactivarlas.
Continuaci ón: Tama ño de letra: <H1> Texto </H1> <H2> Texto </H2> <H3> Texto </H3> <H4> Texto </H4> <H5> Texto </H5> <H6> Texto </H6> Aspecto de letra: <b> Texto </b>  negrilla <strong> Texto </strong> <strike> Texto </strike> <i> Texto </i> cursiva <sup> Texto  </sup>super í ndice <sub> Texto </sub>sub í ndice
Ejemplo: Tabla 1 Tabla 2 < H1 >  El mayor  < /H1 > El mayor < H4 >  Tamaño 4  < /H4 > Tamaño 4 < H2 >  Tamaño 2  < /H2 > Tamaño 2 < H5 >  Tamaño 5  < /H5 > Tamaño 5 < H3 >  Tamaño 3  < /H3 > Tamaño 3 < H6 >  Tamaño 6  < /H6 > Tamaño 6 < b >  Negrita  < /b > < strong >  Negrita  < /strong > Negrita Negrita < i >  Cursiva  < /i > < em >  Cursiva  < /em > Cursiva Cursiva < strike >  Tachada  < /strike > Tachada < sup >  Superíndice  < /sup > Normal Superíndice < kbd >  Máquina  < /kbd > Máquina < sub >  subíndice  < /sub > Normal subíndice
Continuaci ón: Caracteres especiales &aacute; á &eacute; é &iacute; í &oacute; ó &uacute; ú &Aacute; Á &Eacute; É &Iacute; ĺ &Oacute; Ó &Uacute; Ú Otros códigos &ntilde; ñ &Ntilde; Ñ &uuml; ü &Uumi; Ü &#191; ¿ &#161; ¡
Continuaci ón: Movimiento  Puede dar movimiento al texto, gráficos y otros. La instrucción a usar es la siguiente: <marquee></marquee> (instucción básica) <marquee scrolldelay=n></marquee> Establece el númeo de milis e gundos entre cada “scroll” Scrolldelay=“200” Scrolldelay=“100” Scrolldelay=“5”
Continuaci ón: <marquee scrollamount=n></marquee> scrollamount=“1” scrollamount=“5” scrollamount=“10” scrollamount=“50” scrollamount=“100” <marqueeloop=n></marquee> <blink><marquee><</marquee></blink>
LISTAS Listas desordenadas ( unordered list )  Útiles para crear una lista de asuntos o cosas que no tienen un orden. Instrucciones a utilizar: <UL> <LI> <LI> </UL> <LI>  Esta instrucción se repite tantas  veces como sea necesario,   hasta  terminar la lista.
Continuaci ón: Listas ordenadas ( ordered lists ) Utilizadas para mostrar información en un orden.  El resultado aparecerá automáticamente enumerado. Instrucciones a utilizar: <OL> <LI> <LI> </OL>
Continuaci ón: Listas de definición  Apropiadas para glosarios, definiciones o términos Cada renglón consiste de dos pates: Término se ha de definir. <DT> (definition term) Definición del término. <DD> (definition definition) Instrucción a utilizar: <DL> <DT> <DD> <DT> <DD> </DL> *<DT> Y <DL> Se repetirán tantas veces como sea necesario.
ENLACES Para trabajar enlaces: Es una forma de hacer que desde una p á gina podamos acceder a otra p á gina. Enlaces con otras p á ginas: <A HREF=“ejercicio2.html”>Pulse aquí para ir a ejercicio1</A>
Continuaci ón: Enlace con una direcci ó n de Internet: <A HREF= www.endi.com > Peri ódico El Nuevo Día </A> Enlace con una direcci ón de  correo electr ó nico: <A HREF=MAILTO:“ [email_address] ”> Envía un mensaje a la conferenciante</A> Puede utilizar una imagen, gr á fico o foto como enlace. Enlace utilizando una imagen: <A HREF=“ejercicio3.html”><IMG SRC=“nombre del gráfico y extensi ó n”></A>
TABLAS Elementos de una tabla <TR></TR> Fila de una tabla. <TD></TD> Celda de data. <TH></TH> Usado para los títulos de las columnas. ( Básicamente hace la misma función de fila.)
Continuaci ón: Tabla básica: <TABLE>  Habre la instrucción de tabla. <TR>   Comenzar una fila en la tabla. <TD>  Habre una celda de data.   ( aquí puede entrar su text o ,   gráfico, foto, enlace, etc.) </TD>   Cierra la celda de data. </TR>   Cierra la fila. </TABLE>  Cierra la tabla.

Más contenido relacionado

PPTX
Taller de html
DOCX
Html basico
PPTX
PPT
Cont clase de lenguaje IV
PPTX
Tabla de colores hexodecimales
PPT
Codigos HTML Continuación
PPTX
Paola ruiz roa,Alejandra roa HTML
Taller de html
Html basico
Cont clase de lenguaje IV
Tabla de colores hexodecimales
Codigos HTML Continuación
Paola ruiz roa,Alejandra roa HTML

La actualidad más candente (17)

PPT
Html
PPT
Presentaciondehtml Ximenacondori
PDF
Tema 03 formateando texto en html
PPT
Qué es html
PPTX
Guia 4 lenguaje html
PPTX
Present: I WEB DINAMICAS
PPTX
Ejemplo de etiquetas
PPTX
04 Marcas HTML
PDF
Sandra,male yangela guion
PPTX
Codigo de textos
PPT
Html 101
PPTX
Codigos de texto
DOCX
Html basicccccccoooooooooooooo
ODP
Introduccion Xhtml
Html
Presentaciondehtml Ximenacondori
Tema 03 formateando texto en html
Qué es html
Guia 4 lenguaje html
Present: I WEB DINAMICAS
Ejemplo de etiquetas
04 Marcas HTML
Sandra,male yangela guion
Codigo de textos
Html 101
Codigos de texto
Html basicccccccoooooooooooooo
Introduccion Xhtml
Publicidad

Similar a Html (20)

DOCX
Html basico
PPT
Etiquetas Html Udp
PPT
Curso Html Basico
PPT
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
PPS
Html apunte 2
PPT
ODP
PPT
Html Bas
PPTX
LENGUAJE HTML
PDF
Practica Html1
PPTX
Ingeniería web
DOC
Guia básica html
PPT
Html
DOCX
Etiquetas html
PPT
Primeraclase
PPTX
Cristhian garcia
Html basico
Etiquetas Html Udp
Curso Html Basico
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
Html apunte 2
Html Bas
LENGUAJE HTML
Practica Html1
Ingeniería web
Guia básica html
Html
Etiquetas html
Primeraclase
Cristhian garcia
Publicidad

Último (20)

PPTX
Reconocimiento-Automatico-de-Placas-Vehiculares-con-IA.pptx
PPTX
Diapositivas Borrador Rocha Jauregui David Paolo (3).pptx
PDF
Estrategia de apoyo valentina lopez/ 10-3
DOCX
Trabajo grupal.docxjsjsjsksjsjsskksjsjsjsj
PDF
Distribucion de frecuencia exel (1).pdf
PDF
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
DOCX
Informee_APA_Microbittrabajoogrupal.docx
PDF
Inteligencia_Artificial,_Informática_Básica,_22_06_2025_SO_2.pdf
DOCX
Nombre del estudiante Gabriela Benavides
PDF
NREN - red nacional de investigacion y educacion en LATAM y Europa: Caracteri...
PPTX
libro proyecto con scratch jr pdf en la e
DOCX
TRABAJO GRUPAL (5) (1).docxsjsjskskksksksks
PPTX
PRESENTACION El PODER DE LA MENTALIDAD.pptx
PPTX
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
PDF
Guía_de_implementación_Marco_de_gobierno_y_gestión_de_TI_Universidades.pdf
PDF
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
DOCX
Guía 5. Test de orientación Vocacional 2[1] (Recuperado automáticamente).docx
PPTX
El uso de las TIC en la vida cotidiana..
PDF
Presentación_u.01_digitalización_CFGS.pdf
PDF
Taller tecnológico Michelle lobo Velasquez
Reconocimiento-Automatico-de-Placas-Vehiculares-con-IA.pptx
Diapositivas Borrador Rocha Jauregui David Paolo (3).pptx
Estrategia de apoyo valentina lopez/ 10-3
Trabajo grupal.docxjsjsjsksjsjsskksjsjsjsj
Distribucion de frecuencia exel (1).pdf
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
Informee_APA_Microbittrabajoogrupal.docx
Inteligencia_Artificial,_Informática_Básica,_22_06_2025_SO_2.pdf
Nombre del estudiante Gabriela Benavides
NREN - red nacional de investigacion y educacion en LATAM y Europa: Caracteri...
libro proyecto con scratch jr pdf en la e
TRABAJO GRUPAL (5) (1).docxsjsjskskksksksks
PRESENTACION El PODER DE LA MENTALIDAD.pptx
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
Guía_de_implementación_Marco_de_gobierno_y_gestión_de_TI_Universidades.pdf
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
Guía 5. Test de orientación Vocacional 2[1] (Recuperado automáticamente).docx
El uso de las TIC en la vida cotidiana..
Presentación_u.01_digitalización_CFGS.pdf
Taller tecnológico Michelle lobo Velasquez

Html

  • 2. ¿ QUE ES HTML? Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes m á s utilizados en el Web Wide Web. Las p á ginas de Internet est á n escritas en este lenguaje. Le brinda al autor la oportunidad de integrar texto, fotos, sonidos y enlaces en un solo lugar.
  • 3. UNA P Á GINA B Á SICA El lenguaje t r abaja a base de etiquetas. La informaci ó n que aparece dentro de estas estar á influenciada por las mismas. <xxx> Inicio de una etiqueta. </xxx> Cierre de una etiqueta.
  • 4. Continuaci ón: Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>. El documento est á dividido en dos partes principales: El encabezamiento En este hay informaci ó n que no se ve en la pantalla principal. Este debe ser corto y descriptivo, ya que ser á lo que ver á n las personas cuando a ñ adan la p á gina a sus favoritos.
  • 5. Continuaci ón: La etiqueta del encabezamiento se trabajar á de la siguiente manera: <HEAD>Texto</HEAD> La etiqueta del cuerpo ser á : <BODY>Texto</BODY> La etiqueta del t í tulo ser á : <TITLE>Texto</TITLE>
  • 6. Continuaci ón: La estructura b á sica de las partes de una p á gina Web son: <HTML> <HEAD><TITLE> t í tulo </TITLE></HEAD> <BODY>E s la informaci ón que mostrará la página al usuario </BODY> </HTML>
  • 7. FORMATO DEL TEXTO Podemos poner color al fondo utilizando la siguiente instrucci ó n: <BODY BGCOLOR=“xxyyzz”> Indica que lleva tres pares de valores que corresponden a R ( rojo ), G ( verde ), B ( azul ) Estos pueden tomar valores desde 00 a FF, si se combinan se obtendrán distintos colores. Ej. “#FAB894” anaranjado “ FA” rojo, “B8” verde y “94” azul. Para obtener BLANCO ser í a “#FFFFFF”, el Negro “#000000” Y ROJO “#FF0000”.
  • 8. Continuaci ón: Colores xx es un número indicativo de la cantidad de color rojo. YY es un número indicativo de la cantidad de color verde. ZZ es un número indicativo de la cantidad de color azul. Los números están representados en numeración hexadecimal , esta numeración se com p one de 16 dígitos: 0 1 2 3 4 5 6 7 8 9 A B C D E F Donde el número menor es 00 y el mayor es FF. Ejemplo: el número rojo es el #FF0000, debido a que tiene el máximo de rojo y cero de los otros dos colores.
  • 9. Continuaci ón: Los colores primarios son: #FF0000 rojo #00FF00 verde #0000FF azul Otros colores son: #FFFFFF blanco #000000 negro #FFFF00 amarillo
  • 10. Continuaci ón: Otras instrucciones: Para definir p á rrafos: <P> Texto </P> L ínea en blanco: <BR> Texto </BR> Centrar texto: <CENTER> Texto < /CENTER> Línea horizontal: <HR> Texto < /HR> Para el color del texto utiliza el comando: <FONT COLOR=“#xxyyzz”> Texto < /FONT> Debemos recordar que estas instrucciones hay que desactivarlas.
  • 11. Continuaci ón: Tama ño de letra: <H1> Texto </H1> <H2> Texto </H2> <H3> Texto </H3> <H4> Texto </H4> <H5> Texto </H5> <H6> Texto </H6> Aspecto de letra: <b> Texto </b> negrilla <strong> Texto </strong> <strike> Texto </strike> <i> Texto </i> cursiva <sup> Texto </sup>super í ndice <sub> Texto </sub>sub í ndice
  • 12. Ejemplo: Tabla 1 Tabla 2 < H1 > El mayor < /H1 > El mayor < H4 > Tamaño 4 < /H4 > Tamaño 4 < H2 > Tamaño 2 < /H2 > Tamaño 2 < H5 > Tamaño 5 < /H5 > Tamaño 5 < H3 > Tamaño 3 < /H3 > Tamaño 3 < H6 > Tamaño 6 < /H6 > Tamaño 6 < b > Negrita < /b > < strong > Negrita < /strong > Negrita Negrita < i > Cursiva < /i > < em > Cursiva < /em > Cursiva Cursiva < strike > Tachada < /strike > Tachada < sup > Superíndice < /sup > Normal Superíndice < kbd > Máquina < /kbd > Máquina < sub > subíndice < /sub > Normal subíndice
  • 13. Continuaci ón: Caracteres especiales &aacute; á &eacute; é &iacute; í &oacute; ó &uacute; ú &Aacute; Á &Eacute; É &Iacute; ĺ &Oacute; Ó &Uacute; Ú Otros códigos &ntilde; ñ &Ntilde; Ñ &uuml; ü &Uumi; Ü &#191; ¿ &#161; ¡
  • 14. Continuaci ón: Movimiento Puede dar movimiento al texto, gráficos y otros. La instrucción a usar es la siguiente: <marquee></marquee> (instucción básica) <marquee scrolldelay=n></marquee> Establece el númeo de milis e gundos entre cada “scroll” Scrolldelay=“200” Scrolldelay=“100” Scrolldelay=“5”
  • 15. Continuaci ón: <marquee scrollamount=n></marquee> scrollamount=“1” scrollamount=“5” scrollamount=“10” scrollamount=“50” scrollamount=“100” <marqueeloop=n></marquee> <blink><marquee><</marquee></blink>
  • 16. LISTAS Listas desordenadas ( unordered list ) Útiles para crear una lista de asuntos o cosas que no tienen un orden. Instrucciones a utilizar: <UL> <LI> <LI> </UL> <LI> Esta instrucción se repite tantas veces como sea necesario, hasta terminar la lista.
  • 17. Continuaci ón: Listas ordenadas ( ordered lists ) Utilizadas para mostrar información en un orden. El resultado aparecerá automáticamente enumerado. Instrucciones a utilizar: <OL> <LI> <LI> </OL>
  • 18. Continuaci ón: Listas de definición Apropiadas para glosarios, definiciones o términos Cada renglón consiste de dos pates: Término se ha de definir. <DT> (definition term) Definición del término. <DD> (definition definition) Instrucción a utilizar: <DL> <DT> <DD> <DT> <DD> </DL> *<DT> Y <DL> Se repetirán tantas veces como sea necesario.
  • 19. ENLACES Para trabajar enlaces: Es una forma de hacer que desde una p á gina podamos acceder a otra p á gina. Enlaces con otras p á ginas: <A HREF=“ejercicio2.html”>Pulse aquí para ir a ejercicio1</A>
  • 20. Continuaci ón: Enlace con una direcci ó n de Internet: <A HREF= www.endi.com > Peri ódico El Nuevo Día </A> Enlace con una direcci ón de correo electr ó nico: <A HREF=MAILTO:“ [email_address] ”> Envía un mensaje a la conferenciante</A> Puede utilizar una imagen, gr á fico o foto como enlace. Enlace utilizando una imagen: <A HREF=“ejercicio3.html”><IMG SRC=“nombre del gráfico y extensi ó n”></A>
  • 21. TABLAS Elementos de una tabla <TR></TR> Fila de una tabla. <TD></TD> Celda de data. <TH></TH> Usado para los títulos de las columnas. ( Básicamente hace la misma función de fila.)
  • 22. Continuaci ón: Tabla básica: <TABLE> Habre la instrucción de tabla. <TR> Comenzar una fila en la tabla. <TD> Habre una celda de data. ( aquí puede entrar su text o , gráfico, foto, enlace, etc.) </TD> Cierra la celda de data. </TR> Cierra la fila. </TABLE> Cierra la tabla.